<template>
  <div>
    <div v-if="!skeletonIsShow" class="mb-8" v-load-more="getMoreShopList" :type="1">
      <slot name="title"></slot>

      <van-row
        v-for="item in shopData"
        :key="item.id"
        class="py-4 px-2 m-show-box"
        @click="goShopDetail(item)"
      >
        <van-col span="5"
          ><van-image
            class="d-inline-block"
            width="1.7rem"
            height="1.7rem"
            fit="cover"
            :src="imgBaseUrl + item.image_path"
        /></van-col>
        <van-col span="13"
          ><div class="mb-4">
            <span class="m-pin-tag fs-7 d-inline-block" style="transform: translateY(-0.09rem)"
              >品牌</span
            >
            <span class="text-1 fs-4 d-inline-block mx-2 imp-text text-ellipsis wd-75">{{
              item.name
            }}</span>
          </div>
          <div class="mb-4">
            <van-rate
              v-model="item.rating"
              readonly
              allow-half
              size="8px"
              color="#fd9b12"
              gutter="1px"
            /><span class="fs-7 text-3 d-inline-block ml-1" style="color: #fd9b12">{{
              item.rating
            }}</span>
            <span class="fs-10 d-inline-block mx-2">月售{{ item.recent_order_num }}单</span>
          </div>
          <div>
            <span class="text-2 d-inline-block fs-8"
              >￥{{ item.float_minimum_order_amount }}起送</span
            >
            <span class="fs-6">&nbsp;/&nbsp;</span>
            <span class="text-2 d-inline-block fs-8">{{ item.piecewise_agent_fee.tips }}</span>
          </div></van-col
        >
        <van-col span="6">
          <div class="d-flex flex-end" style="flex-direction: column">
            <ul class="pb-2">
              <li
                class="m-support-tag d-inline-block fs-9 mr-1 text-3"
                v-for="value in item.supports"
              >
                {{ value.icon_name }}
              </li>
            </ul>
            <div class="py-2">
              <span
                v-if="item?.delivery_mode"
                class="d-inline-block fs-10 m-tag"
                :style="`background-color:#${item.delivery_mode.color}`"
                >{{ item.delivery_mode.text }}</span
              >
              <span
                class="d-inline-block fs-10 m-tag mx-1"
                v-if="item.zhunTagIsShow"
                style="color: #57a9ff"
                >准时达</span
              >
            </div>
            <div class="py-2 mx-1">
              <span class="fs-8 text-3">{{ item.distance }}</span>
              <span class="fs-7 text-3">&nbsp;/&nbsp;</span>
              <span class="fs-8 main-color">{{ item.order_lead_time }}</span>
            </div>
          </div>
        </van-col>
      </van-row>
      <div v-if="shopListEnd" class="m-no-more mt-4">
        <span class="fs-5 text-3">没有更多了</span>
      </div>
    </div>
    <div class="mt-13" v-if="skeletonIsShow">
      <van-skeleton
        v-for="item in 10"
        class="mt-6"
        avatar
        avatar-shape="square"
        avatar-size="50px"
        :row="3"
      ></van-skeleton>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "ShopList",
};
</script>
<script lang="ts" setup>
import { ref } from "vue";
import { getShopList } from "@/api";
import { ShopList_format } from "@/type/index";
import { imgBaseUrl } from "dir/env.config";
import { useRouter } from "vue-router";
const props = defineProps({
  latitude: {
    type: Number,
  },
  longitude: {
    type: Number,
  },
  limit: {
    type: Number,
    default: 20,
  },
  restaurant_category_id: {
    type: Number,
    default: null,
  },
  restaurant_category_ids: {
    type: Array,
    default: null,
  },
  support_ids: {
    type: Array,
    default: null,
  },
  delivery_mode: {
    type: Number,
    default: null,
  },
  order_by: {
    type: Number,
    default: null,
  },
});

defineExpose({
  reload: () => {
    console.log(props);
    shopListEnd.value = false;
    offset.value = 0;
    shopData.value = [];
    ShopList(offset.value);
  },
});
const router = useRouter();
const offset = ref<number>(0);
const elem = ref<HTMLElement>();
const shopData = ref<ShopList_format>();
const shopListEnd = ref<boolean>(false);
const skeletonIsShow = ref<boolean>(true);
const ShopList = async (offset: number, callback = () => {}) => {
  const res = await getShopList<ShopList_format>({
    latitude: props.latitude,
    longitude: props.longitude,
    offset,
    limit: props.limit,
    restaurant_category_id: props.restaurant_category_id,
    delivery_mode: props.delivery_mode,
    support_ids: props.support_ids,
    restaurant_category_ids: props.restaurant_category_ids,
    order_by: props.order_by,
  });
  res.forEach(item => {
    if (Array.isArray(item.supports) && item.supports.length) {
      item.zhunTagIsShow = item.supports.some(item => {
        return item.icon_name == "准";
      });
    }
  });
  if (offset == 0) {
    shopData.value = res;
    skeletonIsShow.value = false;
  } else {
    shopData.value.push(...res);
  }
  if (res.length < 20) {
    shopListEnd.value = true;
  } else {
    shopListEnd.value = false;
  }
  console.log(shopData.value);
  callback();
};

const loading = ref<boolean>(false);
const getMoreShopList = () => {
  if (loading.value == false) {
    loading.value = true;
    offset.value += 20;
    ShopList(offset.value, () => {
      loading.value = false;
    });
  }
};

const goShopDetail = item => {
  router.push({
    name: "Shop",
    query: {
      id: item.id,
    },
  });
};
//初始化数据
const initData = () => {
  ShopList(offset.value);
};
//调用初始化函数
initData();
</script>

<style lang="scss" scoped>
// @import '@/assets/scss/index.scss';
$text-3: #909399;

$Lighter: #ebeef5;

.m-show-box {
  border-bottom: 0.01rem $Lighter solid;
}
.m-shop-item-box {
  height: 2rem;
}
.m-tag {
  border: 0.01rem #57a9ff solid;
  color: white;
  border-radius: 0.02rem;
  transform: scale(0.9);
  padding: 0.02rem;
}
.m-support-tag {
  border: 0.01rem $text-3 solid;
  border-radius: 0.02rem;
  padding: 0.02rem;
}
.m-pin-tag {
  background-color: #fad850;
  color: #413827;
  padding: 0.03rem 0.05rem;
  font-weight: 600;
  border-radius: 20%;
}
.m-no-more {
  height: 80px;
  text-align: center;
}
</style>
